<template lang="html">
  <div class="detail">
    <v-header></v-header>
    <v-swiper :slide='slides'> </v-swiper>
    <v-chose :detail='details'></v-chose>
    <v-baseline></v-baseline>
    <v-footer></v-footer>
  </div>
</template>

<script>
import Header from '@/components/detail/header.vue'
import Swiper from '@/components/detail/swiper.vue'
import Chose from '@/components/detail/chose.vue'
import Content from '@/components/detail/content.vue'
import Footer from '@/components/detail/footer.vue'
import Baseline from '@/common/_baseline.vue'
import detail from '@/http/mock.js' //模拟数据
import { getGoodDetail } from '@/api/goods'
export default {
  data () {
    return {
      slides: [],
      details: {}
    }
  },
  components:{
    'v-header':Header,
    'v-swiper':Swiper,
    'v-chose':Chose,
    'v-content':Content,
    'v-footer':Footer,
    'v-baseline':Baseline
  },
  created () {
    getGoodDetail({goods_id: this.$route.query.productId}).then(res => {
      if (res.code === 1) {
        this.slides = res.data.gallery
        this.details = res.data
      } else {
        this.$router.push('/login')
      }
    })
  }
}
</script>

<style lang="less" scoped>
.detail {
  width: 100%;
  padding-bottom: 14vw;
  background: rgb(244,246,248);
}
</style>
